(function (fruit, util) {
    fruit.ui.define("fruit.graphic.Topology3D", {
        events: ['Close'],
        view: {
            props: {
                'class': 'f-topology3d'
            },
            content: [
                {
                    tag: 'i',
                    props: {
                        'class': 'icon-core-close-button-x34-light close'
                    },
                    events: {click: "{#_close}"}
                },
                {
                    name: 'g',
                    template: {
                        name: 'frame',
                        props: {
                            'class': 'f-topology3d-frame',
                            style: {
                                left: "{left}",
                                top: "50%"
                                //width: "{width}",
                                //height: "{height}"
                            },
                            left: "{left}",
                            top: "{top}",
                            width: "{width}",
                            height: "{height}"
                        },
                        content: {
                            props: {
                                'class': 'f-topology3d-frame-content',
                                style: {
                                    width: "{width}",
                                    height: "{height}"

                                }
                            },
                            content: {
                                tag: 'h1',
                                content: '{label}'
                            }
                        }
                    }
                }
            ]



        },
        methods: {
            onInit: function () {

                var selectedNode;

                this.$("g").itemGenerator(function (itemEl, itemModel) {
                    itemEl.model(itemModel);


                    var content = itemModel.content;
                    var strokeWidth = content.strokeWidth;
                    var nodeIDArray = [];
                    var frameContent = itemEl._element.firstChild;
                    var svg = d3.select(frameContent).append("svg:svg").attr("width", itemModel.width).attr("height", itemModel.height).attr("class","f-topology");
                    var groupElement = d3.select(content.element.node().cloneNode(true));
                    var _linksGroup = groupElement.append("g");
                    //

                    var links = itemModel.linksGroup.node().cloneNode(true).childNodes;

                    util.each(content.items, function (node) {
                        var nodes = node.element.node().cloneNode(true);
                        nodeIDArray.push(nodes.getAttribute("id"));
                        groupElement.appendDOM(nodes);
                    });

                    for (var i = 0; i < links.length; i++) {
                        var link = links[i];
                        var source_id = link.getAttribute("source_id");
                        var target_id = link.getAttribute("target_id");

                        if (util.indexOf(nodeIDArray, target_id) != -1 && util.indexOf(nodeIDArray, source_id) != -1) {
                            _linksGroup.appendDOM(link.cloneNode(true));
                        }
                    }

                    groupElement.style({
                        "-webkit-transform": "translate(" + (itemModel.bound.x * -1) + "px," + (itemModel.bound.y * -1) + "px)",
                        "-moz-transform": "translate(" + (itemModel.bound.x * -1) + "px," + (itemModel.bound.y * -1) + "px)"
                    });
                    // svg.select("path").style({"stroke-width": strokeWidth});
                    svg.on("click", function () {
                        transform(itemEl, itemModel.width, itemModel.height);
                    });
                    svg.appendDOM(groupElement);

                    itemEl.childAt(0).setStyle("marginTop", itemModel.height / -2);

                    return itemEl;
                });

                var transform = function (itemEl, width, height) {
                    //
                    recover();
                    //
                    if (itemEl != selectedNode) {
                        itemEl.setAttribute("transform", true);
                        itemEl.style({
                            //"marginTop": height / -2,
                            "marginLeft": width / -2
                        });
                        selectedNode = itemEl;

                    } else {
                        selectedNode = null;
                    }
                };


                var recover = function () {
                    if (selectedNode) {
                        selectedNode.setAttribute("transform", false);
                        selectedNode.style({
                            // "marginTop": 0,
                            "marginLeft": 0
                        });
                    }
                };

                this.on("click", function (sender, event) {
                    var target = event.target;
                    if (selectedNode && !selectedNode._element.contains(target)) {
                        recover();
                        selectedNode = null;
                    }
                });
            },
            setBound: function (bound) {
                this.$().style(bound);
            },
            setItems: function (items) {
                this.$("g").items(items);
            },
            transform: function () {
                this.$().addClass("f-topology3d-transformed");
            },
            _close: function () {
                this.fire("Close");
                this.destroy();
            }
        }
    });
})(fruit, fruit.util);